<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 头部 -->
<div class="back">
  <div class="back-img-left">
       <img src="images/组-18.png" >
  </div>

  <div class="back-img-right">
      <img src="images/t1.png">
  </div>
</div>

<!-- 用户名 -->
<div class="user-one">
    <div class="user">
      <img src="images/user.png" class="img-one"><p style="left: 35px;top: 10px;">黑侠(光谷店)</p>
     <img src="images/time.png" class="img-two"> <p style="left: 35px;top: 40px;">2016-04-06&nbsp;&nbsp;10:23&nbsp;&nbsp;AM</p>
    </div>

<!-- 蛋糕 -->
    <div class="cake-one">
        <a href="#" style="color: white;text-align: center;display: block;">戚风蛋糕</a>
    </div>
    <div class="cake-two">
        <a href="#" style="color: rgb(152,97,57);text-align: center;display: block;">蛋挞</a>
    </div>
    <div class="cake-three">
        <a href="#" style="color: rgb(152,97,57);text-align: center;display: block;">全麦面包</a>
    </div>
    <div class="cake-four">
        <a href="#" style="color: rgb(152,97,57);text-align: center;display: block;">戚风蛋糕</a>
    </div>
    <div class="cake-five">
        <a href="#" style="color: rgb(152,97,57);text-align: center;display: block;">三明治</a>
    </div>
    <div class="cake-six">
        <a href="#" style="color: rgb(152,97,57);text-align: center;display: block;"><img src="images/sx.png"></a>
    </div>
    
    

<!--收支明细  -->
    <div class="income">
      <img src="images/shouzhi.png"><span>收支明细</span>
    </div>

    <!-- 菜单 -->
    <div>
        <table class="menu" cellpadding=0 cellspacing=0>
            <tr class="menu-one">
                <td>品名</td>
                <td>数量</td>
                <td>金额</td>
                <td style="padding-right: 20px;">结算价</td>
            </tr>
            <tr>
                <td>蛋挞</td>
                <td >5</td>
                <td>60</td>
                <td>60</td>
            </tr>
            <tr>
                <td>全麦面包</td>
                <td>1</td>
                <td>10.5</td>
                <td>10.5</td>
            </tr>
            <tr>
                <td >戚风蛋糕</td>
                <td>1</td>
                <td>20</td>
                <td>0</td>
            </tr>
            
            <tr >
                <td >三明治</td>
                <td >5</td>
                <td >60</td>
                <td >60</td>
            </tr>
        </table>
    </div>

    <!-- 赠图 -->
    <div class="menu-balk">
       <img src="images/曾.png">
    </div>
    <!-- 桌面图片 -->
    <div class="desk ">  
    </div>

    <!-- 结算 -->
    <div class="settl">
       <div>
          <p>总额:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥125.5</p>
       </div>
       <div>
           <input type="text" placeholder="搜索商品">
           <img src="images/Layer-6.png" style="margin-top: 136px;margin-left: 247px;position: absolute;">
           <button><img src="images/ss.png" class="settl-ss"></button>
       </div>
    </div>

    <!-- 阴影中的图片 -->
    <div class="shadow">
       <img src="images/关闭.png">
       <img src="images/加.png">
       <img src="images/减.png">
       <img src="images/赠.png">
       <img src="images/修改.png">
       <img src="images/椭圆-12.png">
       <img src="images/椭圆-12-拷贝.png">
    </div>

    <!-- 右边的图片 -->
    <div class="purn">
    </div>
    <div class="purn-text">
    </div>
    <div class="purn-line">
        <hr color="red">
    </div>
    <div class="purn-one">
        <img src="images/互动图标.png" style="position: absolute;">
       <p style="color: red;padding-top: 10px;padding-left: 20px;">0001</p>
       <a href="#" style="text-decoration: none;color: black;padding-left: 20px;">巧克力蛋糕</a>
    </div>
    <div class="purn-two">
        <p style="color: red;padding-top: 10px;padding-left: 20px;">0001</p>
        <a href="#" style="text-decoration: none;color: black;padding-left: 20px;">巧克力蛋糕</a>
    </div>
    <div class="purn-three">
        <p style="color: red;padding-top: 10px;padding-left: 20px;">0001</p>
        <a href="#" style="text-decoration: none;color: black;padding-left: 20px;">巧克力蛋糕</a>
    </div>
    <div class="purn-four">
        <p style="color: red;padding-top: 10px;padding-left: 20px;">0001</p>
        <a href="#" style="text-decoration: none;color: black;padding-left: 20px;">巧克力蛋糕</a>
    </div>
    <div class="purn-five">
        <p style="color: red;padding-top: 10px;padding-left: 20px;">0001</p>
        <a href="#" style="text-decoration: none;color: black;padding-left: 20px;">巧克力蛋糕</a>
    </div>


    <!-- 最后的图标 -->
    <div class="word">
    <div class="lastblck">
        <img src="images/组-15.png">
        <p>管理台</p>
    </div>
    <div class="lastblck-two">
         <img src="images/购物卡.png">
         <p>购物卡</p>
    </div>
    <div class="lastblck-three">
        <img src="images/会员.png">
        <p>会员</p>
   </div>
   <div class="lastblck-four">
    <img src="images/增加.png">
    <p>促销</p>
   </div>
   <div class="lastblck-five">
    <img src="images/预定.png">
    <p>预定</p>
   </div>
   <div class="lastblck-six">
    <img src="images/交班22.png">
    <p>交班</p>
   </div>
   <div class="lastblck-seven">
    <img src="images/挂单.png"> 
    <p>挂单</p>
   </div>
   <div class="cash">
       <button style="width: 120px;height: 55px;background-color: rgb(192, 60, 39);outline: none;border: none;color: white;font-size: 20px;"><img src="images/收银中心.png" style="margin-top: -13px;margin-left: -45px;position: absolute;"><p style="position: absolute;margin-left: 46px;margin-top: -12px;">收银</p></button>
   </div>
   </div>

</div>

</body>
</html>